<template>
  <div class="package-main">
    <ul class="main-wrap">
      <li v-for="(item,index) in allData.slice((currentPage-1)*pageSize,currentPage*pageSize)" :key="index" class="main-item">
        <el-card :body-style="{ padding: '0px' }" class="nav-item" shadow="never">
          <div class="image">
            <img v-if="item.coverUrl" :src="item.coverUrl" style="width:100%; height: 170px"/>
            <img
              v-if="!item.coverUrl"
              src="../../../../assets/subjectImg.png"
              style="width:100%; height: 170px"
            />
            <span class="right-tip">{{ item.assetsNum }}个课程</span>
            <!--<span v-if="item.isSelf === '1' && item.isSet === '0'" class="right-tip mr">待设置</span>-->
          </div>
          <ul class="class-body">
            <li class="title">
              {{ item.name }}
              <span v-if="item.isSelf === '0'" class="class-body-self">自营</span>
            </li>
            <li class="class-detail">
              <span>简介： {{ item.description ? item.description : '本资产没有简介' }}</span>
            </li>
            <li class="price">
              <span class="real">￥{{ item.price }}</span>
              <span class="ago">￥{{ item.originPrice }}</span>
              <!--<span class="reserve">{{ item.orderNum }}订购</span>-->
            </li>
            <li class="class-button">
              <el-button v-if="item.isSelf === '0'" size="mini" type="primary" @click="manageClass(item)">管理</el-button>
              <el-button v-if="item.isSelf === '1'" size="mini" type="warning" @click="settingClass(item)">详情</el-button>
              <el-button v-if="item.isSelf === '1' && item.isSplit === '0'" size="mini" type="primary" @click="splitClass(item)">拆分</el-button>
              <el-button v-if="item.status === 'down'" size="mini" type="success" @click="openClass(item)">上架</el-button>
              <el-button v-if="item.status === 'up'" size="mini" type="danger" @click="closeClass(item)">下架</el-button>
              <el-button size="mini" @click="deleteAssets(item.id)">删除</el-button>
            </li>
          </ul>
          <span
            :class="{published:item.status === 'up'}"
            class="left-tip"
          >{{ item.status === 'up' ? '在售': '停售' }}</span>
        </el-card>
      </li>
    </ul>
    <el-pagination
      :current-page.sync="currentPage"
      :page-size="pageSize"
      :page-count="pageCount"
      layout="prev, pager, next, jumper"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
  import {classPackageBus} from './eventBus'
  import {deleteAssets, getAllUserAssets, splitDigitalAssets, updateAssets} from '@/api/subject/digitalAssets' // 数据接口
  import {getUserId} from '@/utils/auth'

  export default {
    data() {
      return {
        currentPage: 1,
        pageSize: 10,
        allData: []
      }
    },
    computed: {
      pageCount() {
        return Math.ceil(this.allData.length / 10)
      }
    },
    mounted() {
      classPackageBus.$on('handleFilter', (val) => {
        this.handleFilter(val)
      })
      this.getData()
    },
    methods: {
      getData() {
        getAllUserAssets(getUserId()).then(res => {
          this.allData = res.data.items
          this.filterList = res.data.items
        })
      },
      handleCurrentChange(val) {
        this.currentPage = val
      },
      openClass(item) {
        item.status = 'up'
        this.updateAssets(item)
      },
      closeClass(item) {
        item.status = 'down'
        this.updateAssets(item)
      },
      updateAssets(item) {
        updateAssets(item).then(() => {
          this.$notify({
            title: '成功',
            message: '更新成功',
            type: 'success',
            duration: 2000
          })
          this.getData()
        })
      },
      deleteAssets(id) {
        this.$confirm('确认要删除', '删除', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteAssets(id).then(() => {
            this.$notify({
              title: '成功',
              message: '资产包已删除',
              type: 'success',
              duration: 2000
            })
            this.getData()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消'
          })
        })
      },
      settingClass(item) {
        this.$router.push({
          name: 'Merchant-setting',
          params: item
        })
      },
      manageClass(item) {
        this.$router.push({
          name: 'Merchant-manage',
          params: item
        })
      },
      splitClass(item) {
        this.$confirm('将资产包中的课件内容拆分出来，可在创建课程课时从资料库的平台资料选择使用', '拆分资产包', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          splitDigitalAssets(item).then(res => {
            this.$notify({
              title: '成功',
              message: '资产包已拆除',
              type: 'success',
              duration: 2000
            })
            this.getData()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消'
          })
        })
      },
      handleFilter(val) {
        this.allData = this.filterList.filter(item => {
          if (val.search && item.name.toLowerCase().indexOf(val.search.toString().toLowerCase()) < 0) return false
          if (val.status && item.status !== val.status) return false
          if (val.categoryId && item.categoryId !== val.categoryId) return false
          return true
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .package-main {
    position: relative;
    width: 100%;
    height: 700px;
    overflow: hidden;
    min-width: 1003px;

    .main-wrap {
      overflow: hidden;
      list-style: none;
      margin: 0;
      padding: 0;
      width: 110%;
      margin-right: -67px;

      .main-item {
        margin-top: 20px;
        width: 16.58%;
        float: left;
        margin-right: 2%;
        height: 300px;

        .nav-item {
          width: 100%;
          min-width: 170px;
          position: relative;
          // @media screen and (max-width: 1950px) {
          //   height: 305px;
          // }
          // @media screen and (max-width: 1850px) {
          //   height: 295px;
          // }
          // @media screen and (max-width: 1750px) {
          //   height: 285px;
          // }
          // @media screen and (max-width: 1650px) {
          //   height: 275px;
          // }
          // @media screen and (max-width: 1550px) {
          //   height: 265px;
          // }
          // @media screen and (max-width: 1450px) {
          //   height: 255px;
          // }
          // @media screen and (max-width: 1350px) {
          //   height: 240px;
          // }
          .el-card__body {
            min-width: 170px;
          }

          .left-tip {
            display: inline-block;
            width: 50px;
            height: 25px;
            line-height: 25px;
            position: absolute;
            top: 12px;
            left: 0;
            // background-color: rgba(14, 212, 135, 0.9);
            background-color: rgba(228, 44, 44, 0.9);
            text-align: center;
            color: #fff;
            font-size: 14px;
          }

          .published {
            background-color: rgba(14, 212, 135, 0.9);
          }

          .image {
            position: relative;
            width: 100%;
            overflow: hidden;

            .right-tip {
              display: inline-block;
              position: absolute;
              right: 0;
              bottom: 4px;
              padding: 0 5px;
              height: 26px;
              line-height: 26px;
              text-align: center;
              font-size: 14px;
              color: #fff;
              border-radius: 3px;
              background-color: rgba(0, 0, 0, 0.6);
            }

            .mr {
              right: 70px;
            }
          }

          .class-body {
            list-style: none;
            margin: 0;
            padding: 8px 14px 0 14px;

            &-self {
              padding: 1px 5px;
              background-color: red;
              border-radius: 5px;
              font-size: 12px;
              color: #fff;
              margin-left: 5px;
            }

            @media screen and (max-width: 1330px) {
              padding: 14px 4px;
            }

            .title {
              font-size: 16px;
              color: #626669;
            }

            .price {
              height: 32px;
              line-height: 32px;

              .real {
                float: left;
                font-size: 18px;
                color: #f21d1d;
                @media screen and (max-width: 1490px) {
                  font-size: 14px;
                }
              }

              .ago {
                font-size: 12px;
                text-decoration: line-through;
                color: #c5c8cb;
                @media screen and (max-width: 1490px) {
                  font-size: 10px;
                }
                @media screen and (max-width: 1330px) {
                  display: none;
                }
              }

              .reserve {
                float: right;
                color: #979ca0;
                font-size: 14px;
                vertical-align: center;
                @media screen and (max-width: 1490px) {
                  font-size: 12px;
                }
              }
            }

            .class-detail {
              padding-top: 8px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;

              span {
                color: #979ca0;
                font-size: 13px;
              }
            }

            .class-button {
              height: 32px;
              // padding-top: 4px;
              .el-button {
                float: right;
                margin-left: 10px;
                padding: 7px 8px;
                @media screen and (max-width: 1610px) {
                  font-size: 12px;
                  margin-left: 2px;
                  width: auto;
                  text-align: center;
                  padding: 7px 7px;
                }
              }
            }
          }
        }
      }
    }

    .el-pagination {
      width: 100%;
      text-align: center;
      height: 30px;
      margin-top: 12px;
    }
  }
</style>
